<!DOCTYPE html>
<html>

	<head>
		<!--头部公用信息引入-->
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta content="webkit" name="renderer">
		<meta content="YES" name="apple-touch-fullscreen">
		<meta content="telephone=no" name="format-detection">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="-1" http-equiv="Expires">
		<meta content="no-cache" http-equiv="pragram">
		<meta name="screen-orientation" content="portrait">
		<meta name="x5-orientation" content="portrait">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<title>k线图</title>
		<!--样式引入-->
		<link rel="stylesheet" href="css/index.css" />

	</head>
	<style type="text/css">
		#k_line{padding:0.2rem 0;}
		.upcolor {color: #e86d43 !important;}		
		.downcolor {color: #03c088 !important;} 
	</style>

	<body>
		<section id="k_line">
			<div class="k_main_data" id="cont"></div>
			<script type="text/template" id="temp">
				{%for(var i = 0;i
				<data.length;i++){%} <div class="data_left">

					{%if(data[i].change>=0){%}
					<h2 id="nowprice" class="upcolor">{%=data[i].price%}</h2><span class="upcolor" id="fudu">{%=data[i].changePercentage%}</span> {%}else{%}
					<h2 id="nowprice" class="downcolor">{%=data[i].price%}</h2><span class="downcolor" id="fudu">{%=data[i].changePercentage%}</span> {%}%}
					</div>
					<div class="data_right">
						<p class="top">
							<span class="title">高</span>
							<span id="hight">
							{%= Number(data[i].high).toFixed(4) %}
						</span>
						</p>
						<p class="down">
							<span class="title">低</span>
							<span class="low">{%= Number(data[i].low).toFixed(4)  %}</span>
						</p>
					</div>
					{%}%}
			</script>

			<div class="k_line">
				<nav>
					<ul class="li_warp" id="nav_change_time">
						<li class="line" data-id='1'>分时</li>
						<li data-id='2'>15分钟</li>
						<li data-id='3'>30分钟</li>
						<li data-id='4'>1小时</li>
						<li data-id='5'>日线</li>
					</ul>
				</nav>
				<div class="big_line"></div>
				<p id="loading">加载中...</p>
				<div id="container" style="height: 300px;">

				</div>
				<div class="big_line"></div>

		</section>

		<script src="js/jq.js"></script>
		<script src="js/echarts.min.js"></script>
		<script src="js/k_line.js"></script>
		<script src="js/public.js"></script>
		<script src="js/template.js"></script>
		<!-- 引入 sockJS  -->
		<script type="text/javascript" src="https://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>
		<script type="text/javascript">
			
			Kline.getData();  //ajax 请求数据 
			Kline.Kline();   //长连接
			Kline.tuiSong();  //推送

			

			
		</script>
	</body>

</html>